<template>
  <div class="container">
    <header>
      <van-swipe :autoplay="2500" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/images/timg.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/images/timg1.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/images/timg2.jpg" alt="">
        </van-swipe-item>
      </van-swipe>
    </header>
    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="50"
        >
          <van-cell v-for="(item, index) in dataList" :key="index" @click="viewDetail(item)">
            <h3 style="margin: 5px">{{ item.title }}</h3>
            <p style="margin: 5px;color: #999;font-size: 12px">{{ item.date }}</p>
            <div style="height: 100px;">{{ item.content }}</div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </main>
    <van-popup style="width: 100%;height: 100%;" v-model="show" position="right" :overlay="false">
      <detail ref="detail" :dataObj="dataObj" @close="show = false"></detail>
    </van-popup>
  </div>
</template>

<script>
import BLL from './Index'
import { mapState } from 'vuex'
import detail from './detail/Index.vue'
export default {
  components: {
    detail
  },
  data () {
    return {
      dataList: [],
      dataObj: {},
      loading: false,
      finished: false,
      isLoading: false,
      show: false,
      page: {
        curIndex: 1,
        count: 5
      },
      list: []
    }
  },
  computed: {
    ...mapState({
      currentRoute: state => state.menus.currentRoute,
      beforeRoute: state => state.menus.beforeRoute
    })
  },
  created () {
    // 初始化
    this.BLL = new BLL(this)
  },
  beforeDestroy () {},
  mounted () {
  },
  methods: {
    onRefresh() {
      this.BLL.refresh()
    },
    viewDetail (e) {
      this.show = true
      this.BLL.GetDetail(e._id)
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        this.BLL.fetch()
      }, 500)
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$store.state.menus.isBar = false
      } else {
        this.$store.state.menus.isBar = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
  @import "Index";
</style>
